<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<body>
    <div id="app">
       <div v-for="buy,i in cart" :key="buy.genme">

        <input type="radio" @click.prevent="handle(i)" value="1" v-model="buy.sel">

        <img :src="buy.pic" width="200px" height="100px" alt="">

        <span>{{buy.genme}}&nbsp;&nbsp;&nbsp;{{buy.price}}¥</span>

        <!-- 买多少个 -->
        <input type="number" @change="sum()" min="0" @clack v-model.number="buy.n">

       </div>
       <div>合计:{{total}}</div>
    </div>
    <script src="/js/js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
               cart:[
                {genme:"手机",price:20,n:1,sel:0,pic:'/image/wallhaven-1pwq23_2560x1600.png',},
                {genme:"电脑",price:30,n:1,sel:0,pic:'/image/wallhaven-85po71_2560x1600.png',},
                {genme:"手表",price:40,n:1,sel:0,pic:'/image/wallhaven-exrj5r_2560x1600.png',}
               ],
               total:0
            },
            methods: {
               handle(i){
                let v=this.cart[i].sel;
                this.cart[i].sel=(v+1)%2;
                //更新总价
                this.sum();
               },
               sum(){
                // let total=0;
                // for(var i=0;i<this.cart.length;i++){
                //     let item=this.cart[i];
                //     if(item.sel==1){
                //         total+=item.price*item.n;
                //     }
                // }
                // this.total=total;

                let t=0;
                this.cart.forEach(item => {
                    if(item.sel){
                        t+=item.price*item.n;
                    }
                });
                this.total=t;
               }
            }
        })
    </script>
</body>
</html>
